<template>
      <!-- TODO 预览弹框 -->
      <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="50%"
      @close="close"
      >
      <el-row  type="flex">
        <el-col :span="6">【题型】:{{ types(questionDetail.questionType) }}</el-col>
        <el-col :span="6">【编号】:{{ questionDetail.id }}</el-col>
        <el-col :span="6">【难度】:{{ transDifficultty( questionDetail.difficulty) }}</el-col>
        <el-col :span="6">【标签】:{{ questionDetail.tags }}</el-col>
      </el-row>
      <el-row  type="flex" style="margin-top:15px;padding-bottom: 15px; border-bottom: 1px solid #999;">
        <el-col :span="6">【学科】:{{ questionDetail.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ questionDetail.directoryName }}</el-col>
        <el-col :span="6">【方向】:{{ questionDetail.direction}}</el-col>
      </el-row>
      <!-- 题干 -->
      <el-row class="questions questionMain">
        <el-col>【题干】:</el-col>
        <el-col class="title" v-html="questionDetail.question"></el-col>
        <el-col style="margin-bottom: 10px;">{{ types(questionDetail.questionType) }}题 选项：(以下选中的选项为正确答案)</el-col>
        <!-- 单选框 -->
        <el-radio-group v-if="questionDetail.questionType === '1'" v-model="radio">
          <div
          style="margin-bottom:15px"
          v-for="item in questionDetail.options"
          :key="item.id"
          >
           <el-radio :label="item.id">{{item.code}} :{{ item.title }}</el-radio>
          </div>
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox-group v-else-if="questionDetail.questionType === '2'" v-model="checkList">
          <div
          style="margin-bottom:15px"
          v-for="item in questionDetail.options"
          :key="item.id"
          >
            <el-checkbox :label="item.id">{{item.code}} :{{ item.title }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </el-row>
      <!-- 参考答案 -->
      <el-row class="questions">
        <el-col>【参考答案】: <el-button type="danger" @click="clickVideo(questionDetail.videoURL)">{{ videoIsShow ? '关闭视频解析' : '视频答案预览' }}</el-button>  </el-col>
        <video
         v-if="videoIsShow"
         :src="questionDetail.videoURL"
         controls
         autoplay
         height="120px"
         style="margin:10px;border-radius:10px"
         ></video>
      </el-row>
      <!-- 答案解析 -->
      <el-row class="questions">
        <el-col>【答案解析】: <span v-html="questionDetail.answer"></span></el-col>
      </el-row>
      <!-- 题目备注 -->
      <el-row class="questions remarks">
        <el-col>【题目备注】:{{ questionDetail.remarks }}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
// 常量
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'PreviewQuestion',
  props: {
    showDialog: {
      type: Boolean,
      required: true,
      default: false
    },
    questionDetail: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      questionType,
      difficulty,
      videoIsShow: false
    }
  },
  methods: {
    // 关闭弹框
    close () {
      this.$emit('update:showDialog', false)
      this.videoIsShow = false
      this.$emit('update:questionDetail', {})
    },
    // 处理题型
    types (val) {
      const obj = this.questionType.find(item => item.value === +val)
      return obj ? obj.label : '未知'
    },
    // 处理难度
    transDifficultty (val) {
      const obj = this.difficulty.find(item => item.value === +val)
      return obj ? obj.label : '未知题型'
    },
    // 点击视频解析按钮
    clickVideo (val) {
      if (val) {
        this.videoIsShow = !this.videoIsShow
      } else {
        // 没有链接 提示用户
        this.$message.warning('这个题没有视频解析')
      }
    }
  },
  computed: {
    // 找到 isRight是1的代表是正确答案
    radio: {
      get () {
        let obj = null
        if (this.questionDetail && this.questionDetail.options) {
          obj = this.questionDetail.options.find(item => item.isRight === 1)
          return obj.id
        } else {
          return false
        }
      },
      set () {
        // 以防点击选项控制台报错
        return false
      }
    },
    // 多选框的选中项
    checkList: {
      get () {
        const arr = []
        if (this.questionDetail && this.questionDetail.options) {
          this.questionDetail.options.forEach(obj => {
            if (+obj.isRight === 1) {
              arr.push(obj.id)
            }
          })
        }
        return arr
      },
      set () {
        return false
      }

    }
  }
}
</script>

<style>

</style>
